<template>
	<div class="">
		
		<swiper :options="swiperOption" >
		  <!-- slides -->
		  <swiper-slide :key="index" v-for="(imgsList,index) in filterImgsList">
				<!-- nav -->
				<div class="nav">
					<div class="item" v-for="imgs in imgsList" :key="imgs.id">
						<img class='item-img' :src="imgs.imgUrl" alt="">
						<span class="item-desc">{{imgs.desc}}</span>
					</div>
				</div>
			</swiper-slide>
			<!-- nav页数 -->
		  <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		
	</div>
</template>

<script>
export default {
	name: 'HomeNav',
	props: ["imgsList"],
	data() {
		return {
			swiperOption: {
				// 所有的参数同 swiper 官方 api 参数
				pagination: {
					el: '.swiper-pagination',
				},
			}
		}
	},
	computed: {
		filterImgsList(){
			let imgsList = [];
			for(let i = 0; i<this.imgsList.length; i++){
				// 取整 ~~
				let j = ~~(i/8)
				/*
					要使imgsList变成一个每一项是长度为8的二维数组
					如果imgsList[j]的元素是空,证明这一项是第一次赋值
					得将它设置为一个空数组,这样才能向二维数组内部添加数据
				*/
				if(!imgsList[j]) imgsList[j] = [];
				imgsList[j].push(this.imgsList[i])
			}
			return imgsList
		}
	}
}
</script>

<style lang="stylus" scoped>
.nav
	display :flex
	flex-wrap:wrap
	height:3.7rem
	.item
		display:flex
		flex-direction :column
		align-items:center
		width: 25%
		height:50%
		.item-img
			width:1.1rem
			margin-top:.2rem
</style>
